<template>
  <div>
    <div>
      <el-input class="addPosInput" size="small" placeholder="添加职称..."
        prefix-icon="el-icon-plus" @keydown.enter.native="addJobLevel"
        v-model="jl.name" style="width: 300px;">
      </el-input>
      <el-select size="small" v-model="jl.titleLevel" placeholder="职称等级" 
        style="margin-left: 8px;margin-right: 8px;">
        <el-option
          v-for="item in titleLevels" :key="item"
          :label="item" :value="item">
        </el-option>
      </el-select>
      <el-button type="primary" size="small" @click="addJobLevel">添加</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table :data="jls" stripe border style="width: 75%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column 
            prop="id" 
            label="编号" 
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职称名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="titleLevel"
            label="职称等级"
            width="150">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="enabled"
            label="是否启用"
            width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
            <el-tag v-else type="danger">未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button size="small" style="margin-top: 8px;" type="danger" 
               :disabled="this.multipleSelection.length == 0"
               @click="deleteMany">批量删除
    </el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="25%">
      <table>
        <tr>
          <td><el-tag>职称名称</el-tag></td>
          <td><el-input size="small" v-model="updateJl.name" style="margin-left: 8px;"></el-input></td>
        </tr>
        <tr>
          <td><el-tag >职称等级</el-tag></td>
          <td>
            <el-select size="small" v-model="updateJl.titleLevel" 
              style="margin-left: 8px;">
              <el-option
                v-for="item in titleLevels" :key="item"
                :label="item" :value="item">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td><el-tag>是否启用</el-tag></td>
          <td>
            <el-switch 
              v-model="updateJl.enabled" 
              active-color='#13ce66'
              inactive-color="#ff4949"
              active-text="已启用"
              inactive-text="未启用"
              style="margin-left: 6px"
              >
            </el-switch>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'JoblevelMana',
    data() {
      return {
        jl: {
          name: '',
          titleLevel: ''
        },
        titleLevels: ['正高级', '副高级', '中级', '初级', '员级'],
        jls: [],
        dialogVisible: false,
        updateJl: {
          name: '',
          titleLevel: '',
          enabled: ''
        },
        multipleSelection: []
      }
    },
    methods: {
      // 初始化列表数据
      initJls(){
        this.getRequest('/system/basic/joblevel/getAllJoblevels').then(resp=>{
          if(resp){
            this.jls = resp.obj;
            // 数据置空
            this.jl.name = '';
            this.jl.titleLevel = '';
          }
        })
      },
      addJobLevel(){
        if(this.jl.name && this.jl.titleLevel){
          this.postRequest('/system/basic/joblevel/', this.jl).then(resp=>{
            if(resp){
              this.initJls();
            }
          })
        }else{
          this.$message.error('职称名称或等级不能为空')
        }
        
      },
      handleEdit(index, data){
        Object.assign(this.updateJl, data);
        this.updateJl.createDate = '';
        this.dialogVisible = true;
      },
      handleDelete(index, data){
        this.$confirm('此操作将永久删除[ '+data.name+' ]职称，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/joblevel/'+data.id).then(resp=>{
            if(resp){
              // 刷新列表
              this.initJls()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      doUpdate(){
        this.putRequest('/system/basic/joblevel/', this.updateJl).then(resp=>{
          if(resp){
            this.initJls();
            this.dialogVisible = false;
          }
        })
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      deleteMany(){
        this.$confirm('此操作将永久删除[ '+this.multipleSelection.length+' ]条职称，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '?'
          this.multipleSelection.forEach(item=>{
            ids += 'ids='+item.id+'&';
          })
          this.deleteRequest('/system/basic/joblevel/'+ids).then(resp=>{
            if(resp){
              // 刷新列表
              this.initJls()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    mounted(){
      // 模板挂载后再初始化列表
      this.initJls();
    }
  }
</script>

<style scoped>
</style>